<template>
  <div class="more">
    <div v-for="item in list" :key="item.id" class="item">
      <div class="topImg" @click="showDetails(item)">
        <img :src="item.src" alt="" />
      </div>
      <span
        style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis"
        >{{ item.name }}</span
      >
      <div class="bottomBtn">
        <span
          >￥<b>{{ item.price }}</b></span
        >
        <button
          @click="
            carStore.addCar({
              name: item.name,
              id: item.id,
              total: 1,
              price: item.price,
              src: item.src
            })
          "
        >
          +
        </button>
      </div>
    </div>
  </div>
  <Car />
  <van-overlay :show="show" @click="show = false" />
  <div class="prodetail" v-if="show">
    <productDetails :item="GoodsId" :off="offModel"></productDetails>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useCarStore } from '@/stores'
import { useAuthStore } from '@/stores'
import Car from '@/components/Car/index.vue'
import productDetails from '@/components/productDetails/index.vue'

// 通过路由query参数判断是鞋子的更多页面还是衣服的更多也买你
const carStore = useCarStore()
// 用户store
const authStore = useAuthStore()
// 列表数据
const list: any = ref([
  {
    id: 1,
    name: '羽绒服(短款)',
    total: 1,
    price: 45,
    src: 'https://hzyczn.52br.net/images/h5/img/c1.png'
  },
  {
    id: 2,
    name: '羽绒服(长款)',
    total: 1,
    price: 59,
    src: 'https://hzyczn.52br.net/images/h5/img/c2.png'
  },
  {
    id: 3,
    name: '呢子衣（短款）)',
    total: 1,
    price: 88,
    src: 'https://hzyczn.52br.net/images/h5/img/c3.png'
  },
  {
    id: 4,
    name: '呢子衣（长款）',
    total: 1,
    price: 99,
    src: 'https://hzyczn.52br.net/images/h5/img/c4.png'
  },
  {
    id: 9,
    name: '库类',
    total: 1,
    price: 99,
    src: 'https://hzyczn.52br.net/images/h5/img/c5.png'
  },
  {
    id: 10,
    name: '皮衣皮革',
    total: 1,
    price: 99,
    src: 'https://hzyczn.52br.net/images/h5/img/c6.png'
  },
  {
    id: 11,
    name: '羊剪绒',
    total: 1,
    price: 99,
    src: 'https://hzyczn.52br.net/images/h5/img/c7.png'
  },
  {
    id: 12,
    name: '衬衣/T恤',
    total: 1,
    price: 99,
    src: 'https://hzyczn.52br.net/images/h5/img/c8.png'
  },
  {
    id: 13,
    name: '真丝衬衫',
    total: 1,
    price: 99,
    src: 'https://hzyczn.52br.net/images/h5/img/c9.png'
  },
  {
    id: 14,
    name: '棉衣',
    total: 1,
    price: 99,
    src: 'https://hzyczn.52br.net/images/h5/img/c10.png'
  },
  {
    id: 15,
    name: '羽绒/棉马夹',
    total: 1,
    price: 99,
    src: 'https://hzyczn.52br.net/images/h5/img/c11.png'
  },
  {
    id: 16,
    name: '风衣',
    total: 1,
    price: 99,
    src: 'https://hzyczn.52br.net/images/h5/img/c12.png'
  },
  {
    id: 17,
    name: '羊毛衫',
    total: 1,
    price: 99,
    src: 'https://hzyczn.52br.net/images/h5/img/c13.png'
  },
  {
    id: 18,
    name: '毛衣',
    total: 1,
    price: 99,
    src: 'https://hzyczn.52br.net/images/h5/img/c14.png'
  },
  {
    id: 18,
    name: '连衣裙',
    total: 1,
    price: 99,
    src: 'https://hzyczn.52br.net/images/h5/img/c15.png'
  },
  {
    id: 18,
    name: '西装上衣',
    total: 1,
    price: 99,
    src: 'https://hzyczn.52br.net/images/h5/img/c16.png'
  }
])
if (authStore.state === 1) {
  list.value = [
    {
      id: 1,
      name: '羽绒服(短款)',
      total: 1,
      price: 45,
      src: 'https://hzyczn.52br.net/images/h5/img/c1.png'
    },
    {
      id: 2,
      name: '羽绒服(长款)',
      total: 1,
      price: 59,
      src: 'https://hzyczn.52br.net/images/h5/img/c2.png'
    },
    {
      id: 3,
      name: '呢子衣（短款）)',
      total: 1,
      price: 88,
      src: 'https://hzyczn.52br.net/images/h5/img/c3.png'
    },
    {
      id: 4,
      name: '呢子衣（长款）',
      total: 1,
      price: 99,
      src: 'https://hzyczn.52br.net/images/h5/img/c4.png'
    },
    {
      id: 9,
      name: '库类',
      total: 1,
      price: 99,
      src: 'https://hzyczn.52br.net/images/h5/img/c5.png'
    },
    {
      id: 10,
      name: '皮衣皮革',
      total: 1,
      price: 99,
      src: 'https://hzyczn.52br.net/images/h5/img/c6.png'
    },
    {
      id: 11,
      name: '羊剪绒',
      total: 1,
      price: 99,
      src: 'https://hzyczn.52br.net/images/h5/img/c7.png'
    },
    {
      id: 12,
      name: '衬衣/T恤',
      total: 1,
      price: 99,
      src: 'https://hzyczn.52br.net/images/h5/img/c8.png'
    },
    {
      id: 13,
      name: '真丝衬衫',
      total: 1,
      price: 99,
      src: 'https://hzyczn.52br.net/images/h5/img/c9.png'
    },
    {
      id: 14,
      name: '棉衣',
      total: 1,
      price: 99,
      src: 'https://hzyczn.52br.net/images/h5/img/c10.png'
    },
    {
      id: 15,
      name: '羽绒/棉马夹',
      total: 1,
      price: 99,
      src: 'https://hzyczn.52br.net/images/h5/img/c11.png'
    },
    {
      id: 16,
      name: '风衣',
      total: 1,
      price: 99,
      src: 'https://hzyczn.52br.net/images/h5/img/c12.png'
    },
    {
      id: 17,
      name: '羊毛衫',
      total: 1,
      price: 99,
      src: 'https://hzyczn.52br.net/images/h5/img/c13.png'
    },
    {
      id: 18,
      name: '毛衣',
      total: 1,
      price: 99,
      src: 'https://hzyczn.52br.net/images/h5/img/c14.png'
    },
    {
      id: 18,
      name: '连衣裙',
      total: 1,
      price: 99,
      src: 'https://hzyczn.52br.net/images/h5/img/c15.png'
    },
    {
      id: 18,
      name: '西装上衣',
      total: 1,
      price: 99,
      src: 'https://hzyczn.52br.net/images/h5/img/c16.png'
    }
  ]
} else {
  list.value = [
    {
      id: 5,
      name: '奢侈品鞋靴/潮鞋',
      total: 1,
      price: 135,
      src: 'https://hzyczn.52br.net/images/h5/img/s1.png'
    },
    {
      id: 6,
      name: '运动鞋/皮鞋',
      total: 1,
      price: 168,
      src: 'https://hzyczn.52br.net/images/h5/img/s2.png'
    },
    {
      id: 7,
      name: '磨砂鞋/绒面鞋',
      total: 1,
      price: 135,
      src: 'https://hzyczn.52br.net/images/h5/img/s3.png'
    },
    {
      id: 8,
      name: '皮靴/雪地靴',
      total: 1,
      price: 111,
      src: 'https://hzyczn.52br.net/images/h5/img/s4.png'
    }
  ]
}
// 展示商品详情
const show = ref(false)
const GoodsId = ref(0)
const showDetails = (id: number) => {
  show.value = true
  GoodsId.value = id
}
// 关闭模态框
const offModel = () => {
  show.value = false
}
</script>

<style lang="less" scoped>
.more {
  box-sizing: border-box;
  height: 90vh;
  overflow: auto;
  padding: 4vw;
  display: flex;
  justify-content: space-around;
  align-content: flex-start;
  gap: 1.3333vw;
  flex-wrap: wrap;
  .item {
    width: 23%;
    height: 37.3333vw;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    background: #fff;
    border-radius: 2.7vw;

    .topImg {
      display: flex;
      justify-content: center;
      align-items: center;
      img {
        width: 16vw;
        height: 16vw;
        border: 0.125vw solid #eee;
        border-radius: 2.75vw;
        padding: 1.5vw;
      }
    }
    .bottomBtn {
      display: flex;
      justify-content: space-between;
      padding: 0 1.3333vw;
      button {
        width: 5vw;
        height: 5vw;
        border: none;
        border-radius: 50%;
        background: #b14094;
        color: #fff;
      }
    }
  }
}
.prodetail {
  height: 60vh;
  position: fixed;
  bottom: 0;
  z-index: 999;
}
</style>
